<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="description" content="" />
    <title>注册</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="css/css.css" rel="stylesheet" type="text/css">
    <link href="css/Animation.css" rel="stylesheet" type="text/css">
    <link href="css/slider.css" rel="stylesheet" type="text/css">
    <link href="layui/css/layui.css" rel="stylesheet" type="text/css">
    <link rel="icon" href="images/icon.ico">
    <script src="js/html5.js" type="text/javascript"></script>
    <link href="https://cdn.staticfile.org/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="layui/layui.js"></script>
    <script src="js/jquery2.js"></script>

    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        .tishi {
            color: darkgrey;
            width: 500px;
            margin-top: 10px;
        }

        .info {
            color: red;
            font-size: 15px;
        }
        #toTop{
            width: 50px;
            height: 65px;
            border: 1px solid black;
            background-color: #f3f6f6;
            opacity: 0.5;
            text-align: center;
            position: fixed;
            right: 80px;
            bottom: 0px;
        }
    </style>
</head>

<body>
<!--索引-->
<header class="navbar-fixed-top headerbg">
    <div class="container-fluid">
        <div class="logo">
            <h3 style="line-height: 30px;font-size: 24.5px;font-family: inherit;font-weight: bold;line-height: 20px;color: inherit;text-rendering: optimizelegibility;"><a href="#"><span style="font-size: 30px;">朋心合力</span></a></h3>
        </div>
        <div class="navBox hidden-xs hidden-sm">
            <ul class="navList list-unstyled">
                <li class="navLi on">
                    <h3><a href="/index"><span>首页</span></a></h3>
                </li>
                <li class="navLi">
                    <h3><a href="/publish"><span>项目发布</span></a></h3>
                </li>
                <li class="navLi">
                    <h3><a href="/course"><span>课程学习</span></a></h3>
                </li>
                <li class="navLi">
                    <h3><a href="/lookingprojects"><span>项目广场</span></a></h3>
                    <div class="navSub">
                        <ul class="navSubList list-unstyled">
                            <li class="navSubLi">
                                <h4><a href="/lookingtalents">● 寻找合伙人</a></h4>
                            </li>
                            <li class="navSubLi">
                                <h4><a href="/lookingprojects">● 寻找项目</a></h4>
                            </li>
                        </ul>
                    </div>
                </li>
                <li class="navLi">
                    <h3><a href="/userInformation"><span>个人主页</span></a></h3>
                </li>
            </ul >
        </div>
    </div>
</header>
<!--轮播动画-->
<div class="banner1" style="width: 100%;height:920px ;">
    <div class="container" style="position: absolute;">
        <section style="margin-top:10px;padding-right: 600px;position: relative;">
            <form action="/registerUser" style="margin-top: 10px;margin-left: -10px;" method="post">
                <dl class="login_form" style="width: 600px;margin-left: 450px;margin-top:200px">
                    <dt style="color: skyblue;padding-left: 222px;">用户注册</dt>
                    <dd>
                        <span th:if="${error} != null" th:text="${error}" style="color: red" id="errormsg"></span>
                    </dd>
                    <dd class="username_icon" style="width: 500px;"><input type="text" placeholder="请输入用户名"
                                                                           class="text_box" name="userName" id="yonghuming" style="width: 300px;" />
                        <span class="info" id="erryonghuming" style="padding-left: 10px;width: 100px;"></span>
                    </dd>
                    <div class="tishi">4到16位（字母，数字，下划线，减号)</div>
                    <!--/^[a-zA-Z0-9_-]{4,16}$/-->
                    <dd class="password_icon" style="width: 500px;"><input type="password" placeholder="请输入密码"
                                                                           class="text_box" name="passWord" id="mima" style="width: 300px;" />
                        <span class="info" id="errmima" style="padding-left: 10px;width: 100px;"></span>
                    </dd>
                    <div class="tishi">6到16位,必须包含字母和数字</div>
                    <!--^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$"其中(?![0-9]+$)-->
                    <dd class="password_icon" style="width: 500px;"><input type="password" placeholder="请密码确认"
                                                                           class="text_box" name="twomima" id="twomima" style="width: 300px;" />
                        <span class="info" id="err_twomima" style="padding-left: 10px;width: 100px;"></span>
                    </dd>
                    <div class="tishi">两次密码必须一致</div>
                    <dd class="email_icon" style="width: 500px;"><input type="password" placeholder="请输入邮箱"
                                                                           class="text_box" name="email" id="email" style="width: 300px;" />
                        <span class="info" id="err_email" style="padding-left: 10px;width: 100px;"></span>
                    </dd>
                    <div class="tishi">填写真实有效的电子邮箱</div>
                    <dd><input type="button" value="免费注册" class="sbmt_btn" /></dd>
                    <dd class="overflow" style="border:none;">
                        <a href="login.html" class="fr" style="color:#ff4400;padding-left: 222px;">已有账号，立即登陆！</a>
                    </dd>
                </dl>
            </form>
            <script type="text/javascript">
                $('.sbmt_btn').click(function () {
                    var yonghuming = $.trim($('#yonghuming').val());
                    var reqyonghuming = /^[a-zA-Z0-9_-]{4,16}$/;
                    if (!reqyonghuming.test(yonghuming)) {
                        $('#erryonghuming').text('你输入的用户名格式错误!')
                        return false;
                    } else {
                        $('#erryonghuming').text('')
                        /*button.SUBMIT('login.html');*/
                    }
                    var mima = $.trim($('#mima').val());
                    var remima = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
                    if (!remima.test(mima)) {
                        $('#errmima').text('你输入的密码格式错误,请检查!')
                        return false;
                    } else {
                        $('#errmima').text('')
                    }
                    var twomima = $.trim($('#twomima').val());
                    if (mima != twomima) {
                        $('#err_twomima').text('两次密码不一致,请检查!');
                        return false;
                    } else {
                        $('#err_twomima').text('');
                    }
                    //验证邮箱地址
                    var mail = $.trim($('#email').val());
                    var reqmail = /^([\.a-zA-Z0-9_-])+@+([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
                    if (!reqmail.test(mail)) {
                        $('#err_email').text('邮箱地址格式不对,请检查!');
                        return false;
                    } else
                        $('#err_email').text('');
                    $.ajax({
                        url:"/registerUser",
                        data:{userName:yonghuming,passWord:mima},
                        success:function(result){
                            if(result===1){
                                alert("注册成功!");
                                location.href="/toLogin";
                            }
                            else{
                                alert("注册失败,账户已经存在");
                            }
                        }});
                });


            </script>
        </section>
    </div>
</div>
<!--底部样式-->
<footer class="footerBg">
    <div class="container">
        <div class="ptb40">
            <div class="footTopL">
                <dl class="clearfix" style="width: 400px; margin-left: 60px;">
                    <dt>关于我们</dt>
                    <dd><a href="#">联系地址</a></dd>
                    <dd><a href="#">荣誉资质</a></dd>
                    <dd><a href="#">加入我们</a></dd>
                    <dd><a href="#">意见及建议</a></dd>
                </dl>
                <dl class="clearfix" style="width: 400px; margin-left: 80px;">
                    <dt>系统团队</dt>
                    <dd><a href="#">林某</a></dd>
                    <dd><a href="#">李某</a></dd>
                    <dd><a href="#">蔡某</a></dd>
                    <dd><a href="#">周某</a></dd>
                </dl>
                <dl class="clearfix" style="width: 400px; margin-left: 100px;">
                    <dt>培训中心</dt>
                    <dd><a href="#">java类培训</a></dd>
                    <dd><a href="#">c/c++类培训</a></dd>
                    <dd><a href="#">Python类培训</a></dd>
                    <dd><a href="#">go语言类培训</a></dd>
                </dl>
                <dl class="clearfix" style="width: 400px; margin-left: 80px;">
                    <dt>权限介绍</dt>
                    <dd><a href="#">队长权限</a></dd>
                    <dd><a href="#">队员权限</a></dd>
                    <dd><a href="#">惩罚机制</a></dd>
                    <dd><a href="#">意见及建议</a></dd>
                </dl>
            </div>
        </div>
    </div>
    <div class="CopyRight">
        <div class="container"><span class="footer_logo"><img src="images/footer_logo.png"></span><span
                class="CopyRight_name">朋心合力平台版权所有</span></div>
    </div>
</footer>
<div id="toTop">
    <i class="arrow up icon">
    </i>
    <p style="margin-top: 10px">&nbsp;返回顶部</p>
</div>
<script type="text/javascript">
    window.onload=function () {
        var oToTop=document.getElementById("toTop");
        oToTop.onclick=function () {
            document.documentElement.scrollTop="0px";
            document.body.scrollTop="0px";
        }
    }
</script>
</body>

</html>
